<template>
	<view class="container">
		<view class="detail">
			<view class="title">{{ detail.title || detail.newsTitle }}</view>
			<!-- <view class="meta"> -->
				<text class="date">{{ formatDate(detail.publishTime || detail.createTime) }}</text>
				<!-- <text class="split">|</text> -->
				<!-- <text class="source">{{ detail.source || detail.author || '来源' }}</text> -->
			<!-- </view> -->
			<rich-text class="content" :nodes="processedContent"></rich-text>
		</view>
	</view>
</template>

<script>
	import { API } from '@/utils/api.js'

	export default {
		data() {
			return {
				detail: {},
				loading: false,
				id: ''
			}
		},
		onLoad(query) {
			this.id = query?.id || ''
			if (this.id) {
				this.fetchDetail()
			}
		},
		computed: {
			cover() {
				return this.detail?.coverUrl || this.detail?.bannerUrl || this.detail?.thumbnailUrl || this.detail?.img || ''
			},
			htmlContent() {
				// 适配不同字段，防止空值
				return this.detail?.content || this.detail?.html || this.detail?.newsContent || ''
			},
			processedContent() {
				if (!this.htmlContent) return ''
				
				// 处理HTML内容，优化图片和视频显示
				let content = this.htmlContent
				
				// 处理图片标签，添加响应式样式
				content = content.replace(
					/<img([^>]*)>/gi,
					'<img$1 style="max-width: 100%; height: auto; border-radius: 8rpx; margin: 20rpx 0; box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);" />'
				)
				
				// 处理视频标签，添加响应式样式
				content = content.replace(
					/<video([^>]*)>/gi,
					'<video$1 style="max-width: 100%; height: auto; border-radius: 8rpx; margin: 20rpx 0; box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);" controls />'
				)
				
				// 处理iframe标签（如嵌入的视频）
				content = content.replace(
					/<iframe([^>]*)>/gi,
					'<iframe$1 style="max-width: 100%; height: 300rpx; border-radius: 8rpx; margin: 20rpx 0; box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);" frameborder="0" allowfullscreen />'
				)
				
				// 处理段落标签，添加间距
				content = content.replace(
					/<p([^>]*)>/gi,
					'<span $1 style="margin: 20rpx 0; line-height: 1.8;" />'
				)
				
				// 处理标题标签
				content = content.replace(
					/<h([1-6])([^>]*)>/gi,
					'<h$1$2 style="margin: 30rpx 0 20rpx 0; font-weight: 600; color: #1c1c29;" />'
				)
				
				// 处理列表标签
				content = content.replace(
					/<ul([^>]*)>/gi,
					'<ul$1 style="margin: 20rpx 0; padding-left: 40rpx;" />'
				)
				
				content = content.replace(
					/<ol([^>]*)>/gi,
					'<ol$1 style="margin: 20rpx 0; padding-left: 40rpx;" />'
				)
				
				// 处理表格标签
				content = content.replace(
					/<table([^>]*)>/gi,
					'<table$1 style="width: 100%; border-collapse: collapse; margin: 20rpx 0; font-size: 26rpx;" />'
				)
				
				content = content.replace(
					/<td([^>]*)>/gi,
					'<td$1 style="border: 1rpx solid #eee; padding: 16rpx; text-align: left;" />'
				)
				
				content = content.replace(
					/<th([^>]*)>/gi,
					'<th$1 style="border: 1rpx solid #eee; padding: 16rpx; text-align: left; background: #f8f9fa; font-weight: 600;" />'
				)
				
				return content
			}
		},
		// 添加分享功能
		onShareAppMessage() {
			const title = this.detail?.title || this.detail?.newsTitle || '精彩资讯'
			const summary = this.detail?.summary || this.detail?.desc || this.detail?.intro || ''
			const shareTitle = summary ? `${title} - ${summary.substring(0, 20)}...` : title
			
			return {
				title: shareTitle,
				path: `/pages/news/newsInfo?id=${this.id}`,
				imageUrl: this.cover || '/static/assets/share/news-detail-share.png'
			}
		},
		// 分享到朋友圈
		onShareTimeline() {
			const title = this.detail?.title || this.detail?.newsTitle || '精彩资讯'
			return {
				title: title,
				imageUrl: this.cover || '/static/assets/share/news-detail-share.png'
			}
		},
		methods: {
			async fetchDetail() {
				if (this.loading) return
				this.loading = true
				try {
					const res = await API.news.getDetail(this.id)
					this.detail = res || {}
				} catch (e) {
					console.error('加载资讯详情失败:', e)
				} finally {
					this.loading = false
				}
			},
			formatDate(value) {
				if (!value) return ''
				try {
					const d = typeof value === 'number' ? new Date(value) : new Date(String(value).replace(/-/g, '/'))
					const y = d.getFullYear()
					const m = (d.getMonth() + 1).toString().padStart(2, '0')
					const day = d.getDate().toString().padStart(2, '0')
					return `${y}-${m}-${day}`
				} catch (e) {
					return String(value)
				}
			}
		}
	}
</script>

<style scoped>
	.container {
		background: #ffffff;
		min-height: 100vh;
		padding: 16rpx 16rpx 100rpx 16rpx;
		box-sizing: border-box;
	}
	.detail {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 24rpx;
		box-shadow: 0 2rpx 8rpx #eee;
	}
	.title {
		font-size: 36rpx;
		font-weight: 600;
		color: #1c1c29;
		line-height: 1.4;
	}
	.meta {
		margin-top: 12rpx;
		color: #999;
		font-size: 24rpx;
	}
	.split {
		margin: 0 8rpx;
	}
	.cover {
		width: 100%;
		border-radius: 12rpx;
		margin: 20rpx 0;
	}
	.content {
		color: #333;
		font-size: 28rpx;
		line-height: 1.8;
		word-break: break-word;
		margin-top: 20rpx;
	}
	
	/* 内容样式优化 */
	.content :deep(img) {
		max-width: 100% !important;
		height: auto !important;
		border-radius: 8rpx !important;
		margin: 20rpx 0 !important;
		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1) !important;
		display: block !important;
	}
	
	.content :deep(video) {
		max-width: 100% !important;
		height: auto !important;
		border-radius: 8rpx !important;
		margin: 20rpx 0 !important;
		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1) !important;
		display: block !important;
	}
	
	.content :deep(iframe) {
		max-width: 100% !important;
		height: 300rpx !important;
		border-radius: 8rpx !important;
		margin: 20rpx 0 !important;
		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1) !important;
		display: block !important;
	}
	
	.content :deep(p) {
		margin: 20rpx 0 !important;
		line-height: 1.8 !important;
		text-align: justify !important;
	}
	
	.content :deep(h1),
	.content :deep(h2),
	.content :deep(h3),
	.content :deep(h4),
	.content :deep(h5),
	.content :deep(h6) {
		margin: 30rpx 0 20rpx 0 !important;
		font-weight: 600 !important;
		color: #1c1c29 !important;
		line-height: 1.4 !important;
	}
	
	.content :deep(h1) { font-size: 40rpx !important; }
	.content :deep(h2) { font-size: 36rpx !important; }
	.content :deep(h3) { font-size: 32rpx !important; }
	.content :deep(h4) { font-size: 30rpx !important; }
	.content :deep(h5) { font-size: 28rpx !important; }
	.content :deep(h6) { font-size: 26rpx !important; }
	
	.content :deep(ul),
	.content :deep(ol) {
		margin: 20rpx 0 !important;
		padding-left: 40rpx !important;
	}
	
	.content :deep(li) {
		margin: 10rpx 0 !important;
		line-height: 1.6 !important;
	}
	
	.content :deep(table) {
		width: 100% !important;
		border-collapse: collapse !important;
		margin: 20rpx 0 !important;
		font-size: 26rpx !important;
		overflow-x: auto !important;
	}
	
	.content :deep(td),
	.content :deep(th) {
		border: 1rpx solid #eee !important;
		padding: 16rpx !important;
		text-align: left !important;
		word-break: break-word !important;
	}
	
	.content :deep(th) {
		background: #f8f9fa !important;
		font-weight: 600 !important;
	}
	
	.content :deep(blockquote) {
		margin: 20rpx 0 !important;
		padding: 20rpx !important;
		background: #f8f9fa !important;
		border-left: 4rpx solid #C6282B !important;
		border-radius: 0 8rpx 8rpx 0 !important;
		font-style: italic !important;
		color: #666 !important;
	}
	
	.content :deep(code) {
		background: #f1f3f4 !important;
		padding: 4rpx 8rpx !important;
		border-radius: 4rpx !important;
		font-family: 'Courier New', monospace !important;
		font-size: 24rpx !important;
	}
	
	.content :deep(pre) {
		background: #f1f3f4 !important;
		padding: 20rpx !important;
		border-radius: 8rpx !important;
		overflow-x: auto !important;
		margin: 20rpx 0 !important;
	}
	
	.content :deep(pre code) {
		background: none !important;
		padding: 0 !important;
	}
	
	.content :deep(a) {
		color: #C6282B !important;
		text-decoration: none !important;
	}
	
	.content :deep(a:hover) {
		text-decoration: underline !important;
	}
	
	.content :deep(strong),
	.content :deep(b) {
		font-weight: 600 !important;
		color: #1c1c29 !important;
	}
	
	.content :deep(em),
	.content :deep(i) {
		font-style: italic !important;
		color: #666 !important;
	}
</style>